<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>part1-2homeWork</title>
    <style>
        .head4{
            color:slategray;
        }
        .head5{
            color: teal;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px auto;
        }
        .box2{
            width: 100%;
            height: 200px;
            position: relative;
        }
        .box2 p{
            width: 100px;
            height: 100px;
            position:absolute;
            left: 50%;
            margin-left: -50px;
            background-color: blue;
        }
        .box3{
            width: 100%;
            height: 600px;
        }
        .box3 div{
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            animation: move1 5s  linear infinite;
        }
        @keyframes move1 {
            0%{
                transform: translateX(0);
            }
            25%{
                transform: translateX(500px);
            }
            50%{
                transform: translateX(500px) translateY(500px);
            }
            75%{
                transform: translateX(0px) translateY(500px);
            }
            100%{
                transform: translateY(0px) translateX(0);
            }
        }

    </style>
</head>
<body>
    <!-- 问答题 -->
    <div>
        <h1>问答题</h1>
        <p>
            <h4 class="head4"> 1.描述一下相对定位与绝对定位的区别</h4>
            <h5 class="head5">答:relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局;
                absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
            </h5>
        </p>
        <p>
            <h4 class="head4"> 2.描述一下你了解到的元素等级有哪些，具体介绍每一个元素等级的特点</h4>
            <h5 class="head5">
             答: 块级元素<br>
                容器级标签,p div h1等
                可以设置宽高
                独占一行
                宽度百分百，高度内容自适应<br>
            行内元素<br>    
                文本级标签，span a b等
                不能加载宽高
                行内跟行内可以并排显示
                宽度高度只能被内容撑开<br>
            行内块元素<br>
                img input等
                可以设置宽高
                可以并排显示
                不设置宽高，会根据内容撑开
                具有标准流的微观性质s <br>
            </h5>
        </p>

        <p>
            <h4 class="head4"> 3.描述一下你所知道的清除浮动的方式（起码三种）</h4>
            <h5 class="head5">答:给标准流的父元素设置固定高度<br>
                标准流的父元素设置clear属性,left、right、both <br>   
                外墙法：两个盒子之间插入clear空盒子解决margin无效 <br>
                内墙法：盒子内部添加clear空盒子解决高度自适应 <br>
                伪类：div class="clearfix" <br>
                    clearfix：after
                    {
                        clear: both;
                        display: block;
                        visibility: hidden;
                        height : 0;
                    } <br>
                溢出隐藏：父元素不设置高度情况下，overflow：hidden；
            </h5>
        </p>
        <p>
            <h4 class="head4"> 4.描述一下你所知道的视频标签属性的属性名、属性值、以及作用（起码四种</h4>
            <h5 class="head5">答:autoplay autoplay 视频自动播放 <br>
                controls controls 显示播放控件 <br>
                loop loop 视频循环播放 <br> 
                preload 视频预加载 <br>
                url 文件地址 视频地址  <br>
                width 1000px 播放器宽度 <br>
                height 1000px 播放器高度 <br>
            </h5>
        </p>
        <p>
            <h4 class="head4"> 5.CSS3新增了伪元素选择器中双冒号与单冒号有什么区别，并阐述一下伪元素的注意事项</h4>
            <h5 class="head5">
                答:autoplay autoplay 视频自动播放 <br>
                在CSS3的规范里，伪元素的语法被修改成使用双冒号 <br>
                伪元素只能给双标签添加，不能给单标签添加 <br> 
                伪元素的冒号前不能有空格<br>
                伪元素里边必选添加属性content:"";<br>
                before和after创建的是行内元素 <br>
            </h5>
        </p>
        <p>
            <h4 class="head4"> 6.标准盒模型与怪异盒模型的区别</h4>
            <h5 class="head5">
                答:content-box 标准盒模型，内容区域只包括内容的宽高（不包括padding），内容区域大小固定，总体大小为width+padding+border <br>
                border-box:固定盒子大小，大小为width和height，包含border、padding，内容区域自适应宽高会自动内减 <br>
            </h5>
        </p>
    </div>


    <h1>代码</h1>
    <h4 class="head4">1. 实现一个盒子水平居中（起码两种方式）</h4>
    <div>
        <div class="box1"></div>
    </div>
    <div class="box2">
        <p ></p>
    </div>

    <h1>2. 使用@keyframes和animation实现一个元素先水平向右移动500px，然后向下移动500px，然后向左移动500px，最后向上500px回到原位，5S完成动画并一直重复
    </h1>
    <div class="box3">
        <div ></div>
    </div>
</body>
</html>